import { Flex, Radio, Table } from "antd"
import { styled, Access } from '@umijs/max'
import CategorySelect from "@/components/CategorySelect"
import GoodsSelect from "@/components/GoodsSelect"
import { GoodsCouponType } from "@/constants/enums/goods"
import { enum2options } from "@/utils/enum2options"
import { CategoryType } from "@/constants/enums/category"

const Container = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
`

type Value = {
  couponType?: GoodsCouponType
  range?: 'All' | 'Partial'
  useTarget?: {id: string, name: string}[]
}

interface UseRangeProps {
  value?: Value
  onChange?: (value?: Value) => void
  style?: React.CSSProperties
}

export const rangeValidator = (value: any) => {
  if (!value.couponType) {
    return Promise.reject(new Error('请选择使用范围'))
  }
  if (value.range === 'Partial' && value.useTarget?.length < 1) {
    return Promise.reject(new Error(`请选择可用${value.couponType === GoodsCouponType.分类 ? '分类' : '商品'}`))
  }
  return Promise.resolve()
}

const UseRange: React.FC<UseRangeProps> = props => {
  const del = (id: string) => {
    props.onChange?.({
      ...props.value,
      useTarget: props.value?.useTarget?.filter(it => it.id !== id)
    })
  }

  return (
    <Container style={props.style}>
      <Flex align="center" style={{height: 32}}>
        <Radio.Group
          value={props.value?.couponType}
          options={enum2options(GoodsCouponType)}
          onChange={({target}) => props.onChange?.({...props.value, couponType: target.value, useTarget: []})}
        />
      </Flex>
      <Flex align="center" style={{height: 32}}>
        <Radio.Group
          value={props.value?.range}
          options={[
            {label: props.value?.couponType === GoodsCouponType.分类 ? '全部分类' : '全部商品', value: 'All'},
            {label: props.value?.couponType === GoodsCouponType.分类 ? '指定分类' : '指定商品', value: 'Partial'},
          ]} 
          onChange={({target}) => props.onChange?.({...props.value, range: target.value})}
        />
      </Flex>
      <Access accessible={props.value?.couponType === GoodsCouponType.分类 && props.value?.range === 'Partial'}>
        <CategorySelect
          key='chose'
          type="checkbox"
          categoryType={CategoryType.商城}
          value={props.value?.useTarget}
          onChange={(val) => props.onChange?.({...props.value, useTarget: val})}
        />
        <Table
          key='table'
          rowKey='id'
          columns={[
            {title: '分类名称', dataIndex: 'name'},
            {title: '操作', width: 100, dataIndex: 'id', render: (id) => {
              return <a onClick={() => del(id)}>删除</a>
            }},
          ]}
          dataSource={props.value?.useTarget}
          pagination={{
            pageSize: 10, total: props.value?.useTarget?.length || 0,
            size: 'small', simple: true, hideOnSinglePage: true,
          }}
        />
      </Access>
      <Access accessible={props.value?.couponType === GoodsCouponType.商品 && props.value?.range === 'Partial'}>
        <GoodsSelect
          key='chose'
          type="checkbox"
          value={props.value?.useTarget}
          target="stock"
          onChange={(val) => props.onChange?.({...props.value, useTarget: val})}
        />
        <Table
          key='table'
          rowKey='id'
          columns={[
            {title: '商品名称', dataIndex: 'name'},
            {title: '操作', width: 100, dataIndex: 'id', render: (id) => {
              return <a onClick={() => del(id)}>删除</a>
            }},
          ]}
          dataSource={props.value?.useTarget}
          pagination={{
            pageSize: 10, total: props.value?.useTarget?.length || 0,
            size: 'small', simple: true, hideOnSinglePage: true,
          }}
        />
      </Access>
    </Container>
  )
}

export default UseRange